<template>
  <div id="app">
    <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" version="1.1">
      <g id="itemsContainer" transform="translate(200,200)">
        <!-- :transform="'translate('+p.offsetX+','+p.offsetY+')'" -->
        <g v-for="(p, i) in paths" :key="i" :transform="'translate('+p.offsetX+','+p.offsetY+')'">
          <g :transform="'rotate(' + p.rotate + ')'" class="item">
            <path :d="p.path"></path>
          </g>
        </g>
        <text class="item-title" v-for="(p, i) in paths" :key="i" alignment-baseline="middle" text-anchor="middle" :transform="'translate('+p.textOffsetX+','+p.textOffsetY+')'">{{i}}{{p.text}}</text>
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue!',
      count: 6,
      path: '',
      paths: []
    }
  },
  methods: {
    // 角度转幅度
    degToArg(deg) {
      return (deg * Math.PI) / 180
    },
    getArcPoint(r, deg) {
      deg = this.degToArg(deg)
      const x = r * Math.cos(deg)
      const y = r * Math.sin(deg)
      return [x, y]
    },
    getArcPath(r, deg) {
      const ps = this.getArcPoint(r, deg)
      const path = `A${r},${r} 0 0,1 ${ps[0]},${ps[1]}`
      return path
    },
    getFanPath(ir, or, deg) {
      const r = ir + or
      const outArcPath = this.getArcPath(r, deg)
      const innerArcPoint = this.getArcPoint(ir, deg)
      const path = `M${ir},0 l${or},0 ${outArcPath} L${innerArcPoint[0]},${innerArcPoint[1]} A${ir},${ir} 0 0,0 ${ir},0`
      return path
    },
    init(count) {
      const ir = 60
      const or = 100
      const deg = 360 / count
      const offset = 2
      for (let i = 0; i < count; ++i) {
        const path = this.getFanPath(ir, or, deg)
        // 使第一个菜单放到上边水平位置
        const rotate = -(90 + deg / 2) + deg * i
        const realRotateArg = this.degToArg(rotate + deg / 2)
        // 向外平移，是菜单之间存在一定间隙
        const offsetX = offset * Math.cos(realRotateArg)
        const offsetY = offset * Math.sin(realRotateArg)
        // 文字位置，中间
        const textMiddle = ir + or / 2
        const textOffsetX = textMiddle * Math.cos(realRotateArg)
        const textOffsetY = textMiddle * Math.sin(realRotateArg)

        this.paths.push({
          path,
          rotate,
          text: '测试',
          deg,
          offsetX,
          offsetY,
          textOffsetX,
          textOffsetY
        })
      }
    }
  },
  mounted() {
    this.init(4)
  }
}
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
  background-color: #f5f7fa;
}

.item {
  fill: #ebedf0;
  stroke: #fff;
  cursor: pointer;
}
.item:hover {
  fill: #aeb5be;
}
.item-title {
  pointer-events: none !important;
}
</style>
